<template>
    <view class="shopping-cart-box">
        <view 
            class="shopping-cart-header"
            @click="goDeliveryAddress"
        >
            <view class="iconfont icon-dizhi shopping-cart-header-icon"></view>
            <view class="shopping-cart-header-main">
                {{ address ? address : '请设置收货地址' }}
            </view>
            <view class="iconfont icon-youjiantou shopping-cart-header-icon"></view>
        </view>
        <view class="shopping-cart-mbox">
            <view
                v-for="(item, index) in shopList"
                :key="index"
                class="shopping-cart-main"
            >
                <image
                    :src="item.zsg_ex6?.split(',')[0]" 
                    :draggable="false"
                    mode="scaleToFill"
                    class="shopping-cart-main-img"
                ></image>
                <view class="shopping-cart-main-text">
                    <view class="shopping-cart-main-text-1">{{ item.zsg_ex1 }}</view>
                    <view class="shopping-cart-main-text-2">{{ item.spec_values }}</view>
                    <view class="shopping-cart-main-text-3">
                        <view class="shopping-cart-main-text-3-right">
                            ￥{{ Number(item.zsg_ex2).toFixed(2) }}
                        </view>
                        <view class="shopping-cart-main-text-3-num">
                            x {{ item.commodityNum }}
                        </view>
                    </view>
                    
                </view>
            </view>
        </view>
        <view class="shopping-cart-footer">
            <view class="shopping-cart-footer-text">合计：<text style="color: red;">￥{{ Number(moneyCount).toFixed(2) }}</text></view>
            <button
                :class="['shopping-cart-button']"
                style=""
                @click="onSubmit" 
                
            >
                提交订单
            </button>
        </view>
    </view>
</template>

<script lang="ts" setup>
    import { onLoad, onShow, onHide, onReady, onUnload, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
    import { markRaw, reactive, ref } from 'vue'
    import type { Ref, Raw } from 'vue'
    import { isPhone } from '@/utils/utils'
    import { placeOrderApi, addressListApi } from '@/apis'
    
    const popup1: Ref<any> = ref(null)
    const address: Ref<string> = ref('')
    const addressId: Ref<number> = ref(0)
    const moneyCount: Ref<number> = ref(0)
    const shopList: Ref<any[]> = ref([
        {
            // commodityNum: 1,
            // checked: false,
            // zsgm_ex1: '12瓶装易捷水', //商品名称
            // zsgm_ex2: 120, //售价积分
            // zsgm_ex4: 62, //销售量
            // zsgm_id: 100,
            // zsgm_ex6: 'http://oss3.smartyoke.com/putaway/23e338cee2cb4428b7a29f45e4ff0268.jpg', //商品图片
            // zsgm_ex3: 0, //库存数量
            // zsgm_ex5: '商品简介', //商品简介
            // zsgm_ex7: '商品类型名称', //商品类型名称
            // zsgm_ex8: '已上架', //是否上架:未上架 ,已上架
            // zsgm_ex9: '未审核', //审核状态:未审核 ,已审核
            // zsgm_create_time: '', //创建时间
            // zsgm_dj_ex3: 0, //冻结数量
        }
    ])
    
    onLoad((val: any) => {
        console.log(val)
        if (val.addressId && val.address) {
            addressId.value = val.addressId
            address.value = val.address
        } else {
            addressListApi({
            }).then((res: any) => {
                if (res.data.length == 1) {
                    addressId.value = res.data[0].zsa_id
                    address.value = `${res.data[0].zsa_ex3}，${res.data[0].zsa_ex4}，${res.data[0].zsa_ex5}${res.data[0].zsa_ex1}`
                } else {
                    for (let i = 0; i < res.data.length; i++) {
                        if (res.data[i].zsa_ex2 == '是' ) {
                            addressId.value = res.data[i].zsa_id
                            address.value = `${res.data[i].zsa_ex3}，${res.data[i].zsa_ex4}，${res.data[i].zsa_ex5}${res.data[i].zsa_ex1}`
                            break;
                        }
                    }
                }
               
            }).finally(() => {
            })
        }
        
        shopList.value = JSON.parse(uni.getStorageSync('commoditiesClearingArr'))
        shopList.value.forEach((item, index) => {
            moneyCount.value += item.zsg_ex2 * item.commodityNum
        })
        
    })
    const goDeliveryAddress = (val: any) => {
        uni.navigateTo({
            url: '/pages/deliveryAddress/deliveryAddress?pageUrl=/pages/commoditiesClearing/commoditiesClearing'
        })
    }
    
    const onSubmit = () => {
        if (addressId.value) {
            uni.showModal({
                showCancel: true,
                title: '温馨提示',
                content: '是否确定提交？',
                success: function (res1) {
                    shopList.value.forEach((item, index) => {
                        item.goodsId = item.zsg_id
                        item.number = item.commodityNum
                    })
                    placeOrderApi({
                        placeOrderVOs: shopList.value,
                        addressId: addressId.value
                    }).then(res2 => {
                        if (res2.code == 200) {
                            uni.showModal({
                                showCancel: false,
                                title: '温馨提示',
                                content: '提交成功！',
                                success: function (res1) {
                                    uni.removeStorageSync('commoditiesClearingArr');
                                    uni.redirectTo({
                                        url: '/pages/mallOrders/mallOrders'
                                    });
                                }
                            });
                        } else {
                            uni.showToast({
                                title: res2.msg,
                                icon: 'error',
                                duration: 1500,
                                mask: true,
                            });
                        }
                        
                    }).catch(err2 => {
                        uni.showToast({
                            title: '提交订单失败！',
                            icon: 'error',
                            duration: 1500,
                            mask: true,
                        });
                    })
                    
                    // uni.switchTab({
                    // 	url: '/pages/mallOrders/mallOrders'
                    // });
                    // if (res1.confirm) {
                    // 	console.log('用户点击确定');
                    // } else if (res1.cancel) {
                    // 	console.log('用户点击取消');
                    // }
                }
            });
        } else {
            uni.showToast({
                title: '请选择地址！',
                icon: 'error',
                duration: 1500,
                mask: true,
            });
        }
    }
</script>

<style lang="scss" scoped>
    .shopping-cart-box {
        background: #f2f2f2;
        // width: 600rpx; 
        box-sizing: border-box; 
        // padding: 0 0 30rpx 0; 
        border-radius: 50rpx 50rpx 0rpx 0rpx;
        height: calc(100vh - var(--window-top) - var(--window-bottom)); //var(--window-top) 页面的内容区域距离顶部距离 var(--window-bottom) 页面的内容区域距离底部距离 app不存在，h5有这两个高度
        display: flex;
        flex-direction: column;
        .shopping-cart-header {
            display: flex;
            // justify-content: space-between;
            align-items: center;
            height: 100rpx;
            background: #fff;
            .shopping-cart-header-main {
                flex: 1;
                padding: 0 10rpx;
                font-size: 26rpx
            }
            .shopping-cart-header-icon {
                font-size: 50rpx;
                color: #023e9e
            }
        }
        .shopping-cart-mbox {
            flex: 1;
            overflow: scroll;
        }
        .shopping-cart-main {
            margin-top: 10rpx;
            background: #fff;
            display: flex;
            align-items: center;
            margin-bottom: 2rpx;
            box-sizing: border-box;
            padding: 20rpx;
            .shopping-cart-main-img {
                width: 180rpx;
                height: 180rpx
            }
            .shopping-cart-main-text {
                height: 180rpx;
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: flex-start;
                box-sizing: border-box;
                padding-left: 10rpx;
                font-size: 28rpx;
                .shopping-cart-main-text-1 {
                    height: 80rpx;
                    overflow: hidden;
                }
                .shopping-cart-main-text-2 {
                    // width: 300rpx;
                    box-sizing: border-box;
                    text-align: center;
                    padding: 8rpx;
                    // background: #dae4f2;
                    font-size: 20rpx;
                    color: rgb(134, 134, 134);
                    background: #f3f1f1;
                }
                .shopping-cart-main-text-3 {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: flex-end;
                    .shopping-cart-main-text-3-right {
                       // text-align: right;
                       color: #f2403c;
                       // font-weight: bold;
                       // padding-left: 10rpx;
                    }
                    .shopping-cart-main-text-3-num {
                    }
                }
                
            }
        }
       .shopping-cart-footer {
           background-color: #fff;
           // height: 100rpx;
           display: flex;
           align-items: center;
           justify-content: space-between;
           box-sizing: border-box;
           padding: 10rpx;
           .shopping-cart-footer-text {
               // width: 250rpx;
               // padding-left: 10rpx;
               font-size: 28rpx;
           }
           
           .shopping-cart-button {
               background-color: #2979ff !important;
               color: #fff !important;
               margin: 0;
               border-radius: 10rpx;
               font-size: 28rpx;
               padding-top: 10rpx;
               padding-bottom: 10rpx;
           }
       }
    }
</style>
